<script type="text/javascript">
    var j=0;
    function imgremove(target){
        if(confirm('是否移除该图片?')){
            $('#pre'+target).remove();
            $('#fm'+target).remove();
        }else{
            return;
        }
        
    }
    $("#product-image").bind("click",function(){
      $("#fileToUpload").click();
    });
    function fileSelectedimg(fileToUpload,target){
        var file = document.getElementById(fileToUpload).files;
        $(".progress").show();
        for (var i = 0;i <file.length; i++) {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById(fileToUpload).files[i]);
            fd.append("target",target);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadCompleteimg, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "__APP__/Upload/medicalimgs");//修改成自己的接口
            xhr.send(fd);
        };    
    }

    function uploadCompleteimg(evt){
        j++;
         var res= JSON.parse(evt.target.responseText);
        if(res.status==1){
            $('#'+res.target).append("<img src='"+res.image+"' class='img-thumbnail' width='100' id='pre"+j+"' onclick='imgremove("+j+")'>  ");
            $('#product-form').append('<input type="hidden" name="imgs" id="fm'+j+'" value="'+res.image+'">');    
            $(".progress").hide();        
        }else{
            alert(res.msg);
        }       
    }

    function uploadCompletes(evt){
         var res= JSON.parse(evt.target.responseText);
        if(res.status==1){
            $('#'+res.target).html("<a id='docurl' target='_blank' href='"+res.docurl+"'>Preview</a> ");
            $('#'+res.target).show();
        }else{
            alert(res.msg);
        }       
    }


    function fileSelected(fileToUpload,target,id) {
        var file = document.getElementById(fileToUpload).files[0];
        if (file) {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById(fileToUpload).files[0]);
            fd.append("target",target);
            fd.append("id",id);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "__APP__/Upload/medicalimg");//修改成自己的接口
            xhr.send(fd);
        }
    }
    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                //document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            $(".progress-bar").css("width",function(){return percentComplete.toString() + '%'});
            $(".progress-bar").text(percentComplete.toString() + '%');
        }else {
            document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
    }
        
    function uploadComplete(evt) {
        /* 服务器端返回响应时候触发event事件*/
        //alert(evt.target.responseText);
        var res= JSON.parse(evt.target.responseText);
        if(res.status==1){
            $('#'+res.target).attr("src", res.image); 
        }else{
            alert(res.msg);
        }
    }
    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    }
    function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    }

</script>
 <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">用户病例管理</h3>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            添加用户病例
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                                <form role="form" id="product-form">
                                        <div class="form-group">
                                            <div class="media">
                                              <div class="media-left">
                                                <a href="#">
                                                  <img class="media-object" src="<if condition="$user.image eq ''">{$user.headimgurl}<else />{$user.image}</if>" alt="用户头像" width="100">
                                                </a>
                                              </div>
                                              <div class="media-body">
                                                <h4 class="media-heading"><b>{$user.name}</b></h4>
                                                <p>
                                                {:L('hospital')}:{$user.hospital}
                                                {:L('address')}:{$user.address}
                                                </p>
                                                <p>
                                                {:L('department')}:{$user.department}
                                                {:L('position')}:{$user.position}
                                                {:L('socialposition')}:{$user.socialposition}
                                                </p>
                                                <p>
                                                {:L('mobile')}:{$user.mobile}
                                                {:L('email')}:{$user.email}
                                                </p>
                                              </div>
                                            </div> 
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('cashtype')}</label>
                                            <select class="form-control" name="cashtype">
                                                <option value="1">免费</option>
                                                <option value="2">收费</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('gender')}</label>
                                            <select class="form-control" name="gender">
                                                <option value="男">男</option>
                                                <option value="女">女</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('age')}</label>
                                            <select class="form-control" name="age">
                                                <volist name="age" id="vo">
                                                    <option value="{$vo.id}">{$vo.age}</option>
                                                </volist>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('complain')}</label>
                                            <textarea class="form-control" rows="3" name="complain"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('history')}</label>
                                            <textarea class="form-control" rows="3" name="history"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('oralhistory')}</label>
                                            <textarea class="form-control" rows="3" name="oralhistory"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('profile')}</label>
                                            <textarea class="form-control" rows="3" name="profile"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('normalcheck')}</label>
                                            <textarea class="form-control" rows="3" name="normalcheck"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('specialcheck')}</label>
                                            <textarea class="form-control" rows="3" name="specialcheck"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('diagnostic')}</label>
                                            <textarea class="form-control" rows="3" name="diagnostic"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('major')}</label>
                                            <select class="form-control" name="major">
                                                <volist name="major" id="vo">
                                                    <option value="{$vo.name}">{$vo.name}</option>
                                                </volist>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('tp')}</label>
                                            <textarea class="form-control" rows="3" name="tp">{$merecord.tp}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('rediagnosis')}</label>
                                            <textarea class="form-control" rows="3" name="rediagnosis">{$merecord.rediagnosis}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('prognosis')}</label>
                                            <textarea class="form-control" rows="3" name="prognosis">{$merecord.prognosis}</textarea>
                                        </div>                                                             
                                        <div class="form-group">
                                            <label>{:L('imageupload')}</label>
                                            <div class="progress" style="display:none;width:200px;margin-top:12px;">
                                                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                                    60%
                                                </div>
                                            </div>
                                            <p id="upimgshow"><p>
                                            <p><button class="btn btn-primary" id="upimg" onclick='$("#upimgs").click();return false;'>选择图片</button><input type="file" name="upimgs" id="upimgs" multiple="true" accept="image/*" onchange="fileSelectedimg('upimgs','upimgshow');" style="display:none;"/></p>
                                            <p class="help-block">可选择多张图片</p>
                                        </div>
                                        <div class="form-group">
                                            <label>{:L('discuss')}</label>
                                            <textarea class="form-control" rows="3" name="discuss"></textarea>
                                        </div>
                                        <button type="button" class="btn btn-success" onclick="check()">提交</button>
                                        <button type="button" class="btn btn-danger" onclick="editurl('__APP__/Medicalrecord/user/id/{$userid}/pubtype/{$pubtype}/p/{$page}');">关闭</button>
                                    </form>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->

        </div>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
        function check(){

            var imgs = $("input[name='imgs']");
            var imgarr =new Array();
            for (var i = 0; i <imgs.length; i++) {
                imgarr.push(imgs[i].value);
            };
            var userid = {$userid};
            var cashtype = $.trim($("select[name='cashtype']").val());
            var gender = $.trim($("select[name='gender']").val());
            var age = $.trim($("select[name='age']").val());
            var major = $.trim($("select[name='major']").val());
            var complain = $.trim($("textarea[name='complain']").val());
            var history = $.trim($("textarea[name='history']").val());
            var oralhistory = $.trim($("textarea[name='oralhistory']").val());
            var profile = $.trim($("textarea[name='profile']").val());
            var normalcheck = $.trim($("textarea[name='normalcheck']").val());
            var specialcheck = $.trim($("textarea[name='specialcheck']").val());
            var diagnostic = $.trim($("textarea[name='diagnostic']").val());
            var tp = $.trim($("textarea[name='tp']").val());
            var rediagnosis = $.trim($("textarea[name='rediagnosis']").val());
            var prognosis = $.trim($("textarea[name='prognosis']").val());
            var discuss = $.trim($("textarea[name='discuss']").val());
            var images = imgarr.join(',');

            if(!complain){
                $("textarea[name='complain']").parent().addClass('has-error');
                return;
            }
            if(!history){
                $("textarea[name='history']").parent().addClass('has-error');
                return;
            }
            if(!oralhistory){
                $("textarea[name='oralhistory']").parent().addClass('has-error');
                return;
            }
            if(!profile){
                $("textarea[name='profile']").parent().addClass('has-error');
                return;
            }
            if(!normalcheck){
                $("textarea[name='normalcheck']").parent().addClass('has-error');
                return;
            }
            if(!specialcheck){
                $("textarea[name='specialcheck']").parent().addClass('has-error');
                return;
            }
            if(!diagnostic){
                $("textarea[name='diagnostic']").parent().addClass('has-error');
                return;
            }
            if(!tp){
                $("textarea[name='tp']").parent().addClass('has-error');
                return;
            }
            if(!rediagnosis){
                $("textarea[name='rediagnosis']").parent().addClass('has-error');
                return;
            }
            if(!prognosis){
                $("textarea[name='prognosis']").parent().addClass('has-error');
                return;
            }
            if(!discuss){
                $("textarea[name='discuss']").parent().addClass('has-error');
                return;
            }
            if(!images){
                images=0;               
            }

            $.post('__APP__/Medicalrecord/add',{
                    cashtype:cashtype,
                    gender:gender,
                    age:age,
                    major:major,
                    complain:complain,
                    history:history,
                    oralhistory:oralhistory,
                    profile:profile,
                    normalcheck:normalcheck,
                    specialcheck:specialcheck,
                    diagnostic:diagnostic,
                    tp:tp,
                    rediagnosis:rediagnosis,
                    prognosis:prognosis,
                    discuss:discuss,
                    images:images,
                    userid:userid;
                },function(data){
                if(data.status==1){
                    alert('操作成功');
                    editurl('__APP__/Medicalrecord/user/id/{$userid}/pubtype/1');
                }else{
                    //alert('操作失败');
                    alert(data.msg);
                }
            });

        }
    </script>

</body>

</html>
